<!--
 * @Description: 
 * @version: 
 * @Author: 171
 * @Date: 2022-08-31 10:29:55
 * @LastEditors: 171
 * @LastEditTime: 2022-09-21 11:41:08
-->


<script setup lang='ts'>
  
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import Navigator from './components/Navigator.vue';

  const fullWidth =  ref<number>(document.documentElement.clientWidth),
        fullHeight =  ref<number>(document.documentElement.clientHeight);
  const handleResize = () => {
    fullWidth.value = document.documentElement.clientWidth;
    fullHeight.value = document.documentElement.clientHeight;
  }
  onMounted(() => {
    window.addEventListener('resize', handleResize)
  });
  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize)
  })

</script>

<template>
  <Navigator></Navigator>

  <!-- 进行路由的缓存，这里include需要路由组件导出的name属性 -->
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="['epidemic', 'talk-list', 'interact']">
      <component :is="Component" />
    </keep-alive>
  </router-view>
   
  <!-- 用于设置背景图片 -->
  <div class="register" :style="{width: fullWidth + 'px', height: fullHeight + 'px'}">
    <div class="img_box" :style="{width: fullWidth + 'px'}"></div>
  </div>

  
</template>

<style lang='less'>
  @import "animate.css";
  @import "./tailwind.css";
  @import "./assets/iconfont.css";
  *{
    padding: 0;
    margin: 0;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  html, body, #app{
    height: 100%;
    width: 100%;
    overflow: hidden;
    color: #fff;
  }
</style>

<style lang='less' scoped>
  .register {
  // 固定外层盒子，不受其他盒子影响
  // 放在最底层
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  .img_box { 
    // position: absolute; // 这里外层盒子已经固定定位了，其实可以不加定位
    background-image: url('/moon.gif');
    background-size: cover;
    background-repeat: no-repeat;
    //保证盒子始终在窗口中心
    background-position: center center;
    //避免窗口周围留白
    width: 101%;
    height: 101%;
  }
}
</style>